<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[
          { required: true, message: '请填写用户名' },
          {
            pattern: /^[a-z_$][0-9a-z_$]{3,9}$/i,
            message: '只能是数字字母_$组成不能是数字开头长度4到10位',
          },
        ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            pattern: /^[0-9a-z]{4,12}$/i,
            message: '密码数字字母组成长度4到12位',
          },
        ]"
      />
      <van-field
        v-model="password2"
        type="password"
        name="password2"
        label="确认密码"
        placeholder="密码"
        :rules="[
          { validator: checkPassword, message: '两次输入的密码保持一致' },
        ]"
      />
      <van-field
        v-model="phonenumber"
        name="phonenumber"
        label="电话"
        placeholder="请输入常用的手机号"
        :rules="[
          { required: true, message: '手机号不能为空' },
          {
            pattern: /^1[3-9][0-9]{9}$/i,
            message: '请输入常用的手机号',
          },
        ]"
      />

      <van-field name="sex" label="性别">
        <template #input>
          <van-radio-group v-model="sex" direction="horizontal">
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>


      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import  {userRegister} from  "@/service/mineService"
export default {
  data() {
    return {
      username: "", //用户名
      password: "", //密码
      password2: "", //确认密码
      phonenumber: "", //手机号
      sex:"0",//性别
    };
  },
  methods: {
    checkPassword(val) {
      return this.password === val;
    },
   async onSubmit(values) {
      // console.log("submit", values);
      let res  = await userRegister({
        userName:values.username,
        password:values.password,
        phonenumber:values.phonenumber,
        sex:values.sex
      })
      // console.log(res);
      if(res.data.code ==200){ //表示成功
        this.$emit("setActive",0);
      }else{ //表示失败
        this.$toast.fail(res.data.msg);
      }

      //假设数据已经提交成功
      //
    },
  },
};
</script>

<style></style>
